<template>
    <div class="body">
        <div class="video" v-for="item in TextList" :key="item.uid">
            <h3>{{ item.Copywriting }}</h3>
            <video :src="item.video" controls loop />
            <div class="boxBottom">
                <span class="sp1">{{ item.username }}</span>
                <span class="iconfont icon-yanjing">{{ item.watch }}万人看过</span>
            </div>
        </div>

        <div class="box" v-for="item in AllTextList">
            <div class="boxContent">{{ item.Copywriting }}</div>
            <div class="boxImg">
                <img :src="item.img1" alt="" @click="changeDetails(item.uid)">
                <img :src="item.img2" alt="" @click="changeDetails(item.uid)">
                <img :src="item.img3" alt="" @click="changeDetails(item.uid)">
            </div>
            <div class=" boxBottom">
                <span class="sp1">{{ item.username }}</span>
                <span class="iconfont icon-yanjing">{{ item.watch }}万人看过</span>
            </div>
        </div>

        <van-loading type="spinner" size="14px" text-size="12px" color="#000">加载中...</van-loading>
    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router/index'
import { getBoutiqueList } from '@/api/api'
const changeDetails = (uid) => {
    localStorage.setItem('uId', uid)
    router.push({ name: 'restaurantCard', query: { uid } })
    // 将id存入本地
    // useStore.setuId(uid)
}
const TextList = ref([])
const AllTextList = ref([])
const initGetList = async () => {
    let { data } = await getBoutiqueList()
    let newData = data
    newData = newData.filter((item, index) => {
        return index != 0
    })
    TextList.value = data.slice(0, 1)
    AllTextList.value = newData
}

onMounted(() => {
    initGetList()
}
)

</script>

<style lang="scss" scoped>
.body {
    width: 100%;

    .video {
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;

        video {
            width: 100%;
        }

        h3 {
            height: 21px;
            font-size: 14px;
            text-align: left;
            font-weight: 500;
            padding: 20px 40px;
        }
    }

    .box {
        width: 100%;
        color: rgba(80, 80, 80, 1);
        background-color: rgba(255, 255, 255, 1);
        font-size: 16px;
        border: rgba(243, 243, 243, 1) solid 1px;
        background-color: #fff;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .boxContent {
            padding-bottom: 15px;
            font-size: 28px;
            line-height: 150%;
            padding-left: 10px;
            padding: 0 40px;
        }

        .boxImg {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-bottom: 15px;
            padding: 0 40px;
            box-sizing: border-box;


            img {
                width: 210px;
                height: 140px;
            }

        }
    }

    .boxBottom {
        display: flex;
        // margin-left: 10px;
        box-sizing: border-box;
        overflow: hidden;

        .sp1 {
            padding-right: 50px;
            color: rgba(166, 166, 166, 1);
            font-size: 12px;
            line-height: 150%;
            padding: 0 40px;
        }

    }
}

.iconfont {
    font-size: 12px;
    color: rgba(166, 166, 166, 1);
    height: 33px;
    line-height: 150%;
}

.van-loading {
    margin-top: 20px;
    text-align: center;
}
</style>